<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0px;
        }
        ul{ list-style: none;}
        img{ display: block;}
        /*.clear:after{ content:""; display: block; clear:both;}*/

        #main{ width:826px; margin:20px auto; border:1px #cccccc solid;}
        .list{ width:830px;}
        .list li{
            width:250px;
            height:250px;
            float:left;
            margin:13px;
            position: relative;
            overflow: hidden;
        }
        .list_text{
            width:100%;
            height:0px;
            background:rgba(0,0,0,.5);
            position: absolute;
            left: 0;
            top:50px;
            z-index: 2;
            overflow: hidden;
            transform:rotate(50deg);
            transition:.5s;
        }
        .list_text h2{
            height: 56px;
            border-bottom:1px #8a7881 solid;
            font-size: 24px; color:white;
            line-height: 56px;
            text-align: center;
        }
        .list_text p{
            border-top:2px #b1a5ab solid;
            line-height: 26px;
            font-size: 20px;
            color:white;
            text-align: center;
            padding-top: 13px;
        }

        .list_maskUp{
            width:350px;
            height:350px;
            position: absolute;
            left: 0;
            top: -300px;
            z-index: 1;
            background:rgba(199,4,109,.5);
            transform:rotate(45deg) translateX(-200px);
            transition:.5s;
        }
        .list_maskDown{
            width:350px;
            height:350px;
            position: absolute;
            left: 0;
            top: 300px;
            z-index: 1;
            background:rgba(199,4,109,.5);
            transform:rotate(45deg) translateX(50px);
            transition:.5s;}

        .list li:hover .list_text{ height:150px; transform:rotate(0deg);}
        .list li:hover .list_maskUp,.list li:hover .list_maskDown{ top:0;}

    </style>
</head>
<body>
<div id="main">
    <ul class="list clear">
        <li>
            <img src="img/img.png" height="250" width="250" alt="">
            <div class="list_text">
                <h2>测试文字</h2>
                <p>测试段落测试段落测试段落测试段落测试段落</p>
            </div>
            <div class="list_maskUp"></div>
            <div class="list_maskDown"></div>
        </li>
        <li>
            <img src="img/img.png" height="250" width="250" alt="">
            <div class="list_text">
                <h2>测试文字</h2>
                <p>测试段落测试段落测试段落测试段落测试段落</p>
            </div>
            <div class="list_maskUp"></div>
            <div class="list_maskDown"></div>
        </li>
        <li>
            <img src="img/img.png" height="250" width="250" alt="">
            <div class="list_text">
                <h2>测试文字</h2>
                <p>测试段落测试段落测试段落测试段落测试段落</p>
            </div>
            <div class="list_maskUp"></div>
            <div class="list_maskDown"></div>
        </li>
        <li>
            <img src="img/img.png" height="250" width="250" alt="">
            <div class="list_text">
                <h2>测试文字</h2>
                <p>测试段落测试段落测试段落测试段落测试段落</p>
            </div>
            <div class="list_maskUp"></div>
            <div class="list_maskDown"></div>
        </li>
        <li>
            <img src="img/img.png" height="250" width="250" alt="">
            <div class="list_text">
                <h2>测试文字</h2>
                <p>测试段落测试段落测试段落测试段落测试段落</p>
            </div>
            <div class="list_maskUp"></div>
            <div class="list_maskDown"></div>
        </li>
        <li>
            <img src="img/img.png" height="250" width="250" alt="">
            <div class="list_text">
                <h2>测试文字</h2>
                <p>测试段落测试段落测试段落测试段落测试段落</p>
            </div>
            <div class="list_maskUp"></div>
            <div class="list_maskDown"></div>
        </li>
    </ul>
</div>

</body>
</html>